<template>
    <div @longpress="long">
      <!-- 时间显示 -->
      <view v-if="showTime" class="flex align-center justify-center pb-4 pt-2">
        <text class="font-sm text-light-muted">{{showTime}}</text>
      </view>
      <!-- 撤回消息 -->
      <view v-if="item.isremove" class="flex align-center justify-center pb-4 pt-1">
        <text class="font-sm text-light-muted">你撤回了一条信息</text>
      </view>
      <!-- 气泡内容 -->
      <view v-else class="flex align-start mb-3" :class="!isself ? 'justify-start' : 'justify-end'">
        <!-- 好友 -->
        <template v-if="!isself">
          <free-avatar clickType="navigate" size="70" :src="item.avatar"></free-avatar>
        </template>
        
        <div class="p-2 rounded" style="max-width: 500rpx;" :class="isself ? 'bg-chat-item mr-3' : 'bg-white ml-3'" :style="labelStyle">
          <!-- 文字类 -->
          <text v-if="item.type === 'text'" class="font-md">{{item.data}}</text>
          <!-- 表情包或者图片 -->
          <free-image v-else-if="item.type === 'emoticon' || item.type === 'image'" :src="item.data" imageClass="rounded" @click="preview(item.data)" :maxWidth="500" :maxHeight="350"></free-image>
          
          <!-- 音频 -->
          <view v-else-if="item.type === 'audio'" @click="openAudio" class="flex align-center">
            <image v-if="isself" :src=" !audioPlaying ? '/static/images/audio/audio3.png' : '/static/images/audio/play.gif'" mode="" style="width: 50rpx;height: 50rpx;" class="mx-1"></image>
            <text class="font">{{item.options.time + '"'}}</text>
            <image v-if="!isself" :src=" !audioPlaying ? '/static/images/audio/audio3.png' : '/static/images/audio/play.gif'" mode="" style="width: 50rpx;height: 50rpx;" class="mx-1"></image>
          </view>
          
          <!-- 视频的样式 -->
          <view class="position-relative rounded" v-else-if="item.type === 'video'" @click="openVideo">
            <free-image :src="item.options.poster" imageClass="rounded" :maxWidth="300" :maxHeight="350" @load="loadPoster"></free-image>
            <text class="iconfont iconfont-voyaged" :style="posterIconStyle">&#xe67f;</text>
          </view>
        </div>
        <!-- 本账号 -->
        <template v-if="isself">
          <free-avatar size="70" :src="item.avatar" clickType="navigate"></free-avatar>
        </template>
      </view>
    </div>
    <!-- <view class="flex align-start justify-end">
      <div class="bg-chat-item p-2 rounded mr-3" style="max-width: 500rpx;">
        <text class="font-md">很高兴认识你很高兴认识你很高兴认识你很高兴认识你</text>
      </div>
      <free-avatar size="70" src="/static/images/userpic.png"></free-avatar>
    </view> -->
</template>

<script>
  import freeAvatar from "@/components/free-ui/free-avatar.vue"
  import freeImage from './free-image.vue'
  import $T from "@/common/free-lib/time.js"
  import { mapState, mapActions } from 'vuex'
  export default {
    components: {
      freeAvatar,
      freeImage
    },
    props: {
      item: Object,
      index: Number,
      // 上一条消息的时间戳
      pretime: [Number,String]
    },
    data() {
      return {
        h: 100,
        w: 100,
        innerAudioContext: null,
        audioPlaying: false,
        // 默认封面的宽高
        poster: {
          w: 100,
          h: 100
        }
      }
    },
    computed: {
      labelStyle() {
        if (this.item.type === 'audio') {
          let time = this.item.options.time || 0
          let width = parseInt(time) / (60/500)
          width = width < 150 ? 150 : width
          return `width: ${width}rpx`
        }
      },
      // 是否是本人
      isself() {
        // 1.获取本人id
        let id = 1
        return this.item.user_id === id
      },
      // 显示的时间
      showTime() {
        return $T.getChatTime(this.item.create_time,this.pretime)
      },
      // 气泡的样式 这里写了没有加上,
      labelClass() {
        let label = this.hasLabelClass ? 'bg-chat-item mr-3' : 'mr-3'
        return this.isself ? label : 'ng-white ml-3'
      },
      // 短视频封面图标位置
      posterIconStyle() {
        let w = this.poster.w/2 - uni.upx2px(80)/2
        let h = this.poster.h/2 - uni.upx2px(80)/2
        return `left: ${w}px;top: ${h}px;`
      }
    },
    mounted() {
      // 注册全局事件
      // 这里的res实际上就是audio中的event
      if (this.item.type === 'audio') {
        this.audioOn(this.onPlayAudio)
      }
      // // 监听是否撤回消息
      // this.$watch('item.isremove',(newVal, oldVal) => {
      //   // console.log(newVal)
      //   if (newVal) {}
      // })
    },
    // 组件销毁时
    destroyed() {
      if (this.item.type === 'audio') {
        this.audioOff(this.onPlayAudio)
      }
      // 销毁音频
      if (this.innerAudioContext) {
        this.innerAudioContext.destroy()
        this.innerAudioContext = null
      }
    },
    methods: {
      ...mapActions(['audioOn', 'audioEmit', 'audioOff']),
      // 加载封面
      loadPoster(e) {
        this.poster.w = e.w
        this.poster.h = e.h
      },
      // 监听播放音频全局事件
      onPlayAudio(index) {
        // console.log('当前播放的索引'+index)
        if (this.innerAudioContext) {
          if (this.index !== index) {
            this.innerAudioContext.pause()
          }
        }
      },
      // 预览图片
      preview(url) {
        // console.log(url)
        // uni.previewImage({
        //   current: url,
        //   urls: [url]
        // })
        this.$emit('preview', url)
      },
      // 播放音频
      openAudio() {
        // 通知其他音频要关闭
        this.audioEmit(this.index)
        if (!this.innerAudioContext) {
          this.innerAudioContext = uni.createInnerAudioContext();
          this.innerAudioContext.src = this.item.data
          this.innerAudioContext.play()
          // 监听播放
          this.innerAudioContext.onPlay(() => {
            this.audioPlaying = true
          })
          // 监听暂停
          this.innerAudioContext.onPause(() => {
            this.audioPlaying = false
          })
          // 监听停止
          this.innerAudioContext.onStop(() => {
            this.audioPlaying = false
          })
          // 监听错误
          this.innerAudioContext.onError(() => {
            this.audioPlaying = false
          })
        } else {
          this.innerAudioContext.stop()
          this.innerAudioContext.play()
        }
      },
      // 长按时间
      long(e) {
        let x = 0
        let y = 0
        // #ifdef APP-PLUS-NVUE
        if (Array.isArray(e.changedTouches) && e.changedTouches.length > 0) {
          x = e.changedTouches[0].screenX
          y = e.changedTouches[0].screenY
        }
        // #endif
        // #ifdef MP
        x = e.detail.x
        y = e.detail.y
        // #endif
        console.log(e)
        this.$emit('long', {x,y,index: this.index})
      },
      // 打开视频
      openVideo() {
        uni.navigateTo({
          url: '/pages/chat/video?url='+this.item.data
        })
      }
    }
  }
</script>

<style scoped>
  /* .chat-animate {
    opacity: 0;
  } */
  .iconfont-voyaged {
    color: white;
    font-size: 80rpx;
    position: absolute;
    width: 80rpx;
    height: 80rpx;
  }
</style>
